<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 显示总数 -->
			<h2>总数：{{total}}</h2>
			<!-- 自定义按钮组件，绑定增加和减少的事件 -->
			<my-btn @increase="getTotal" @reduce="getTotal"></my-btn>
		</div>
		<template id="temp">
			<div>
				<!-- 点击增加的按钮 -->
				<button @click="add()">单击+1</button>
				<!-- 点击减少的按钮 -->
				<button @click="red()">单击-1</button>
			</div>
		</template>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Vue.component('my-btn', {
				template: "#temp",
				// 组件的数据定义
				data() {
					return {
						counter: 0 // 初始化计数器为 0
					}
				},
				methods: {
					add() {
						// 增加计数器的值，并触发 increase 事件传递计数器的值
						this.counter++;
						//在 Vue 中，`$emit` 是一个实例方法。
						// 它用于组件内部向父组件触发自定义事件，并可以携带数据作为参数传递给父组件。
						// 通过 `$emit` 触发的事件可以在父组件使用 `v-on` 指令进行监听，从而实现组件之间的通信。
						//例如，子组件通过 `$emit` 触发一个事件，父组件接收到这个事件后，可以执行相应的处理逻辑。
						//例如`this.$emit('eventName', data)`中`'eventName'`是要触发的事件名称
						//`data`是要传递给父组件的数据。
						this.$emit("increase", this.counter);
					},
					red() {
						// 减少计数器的值，并触发 reduce 事件传递计数器的值
						this.counter--;
						this.$emit("reduce", this.counter);
					}
				}
			})
			var vm = new Vue({
				el: '#app', // 将 Vue 实例挂载到具有 ID "app" 的元素上
				data: {
					total: 0 // 初始化总数为 0
				},
				methods: {
					getTotal(total) {
						// 根据传递的参数更新总数
						this.total = total;
					}
				}
			});
		</script>

	</body>
</html>